<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        /* .title {
            background-color: pink !important;
        } */

    </style>
</head>

<body>

    <button class="del">删除</button>
    <button class="info">提示</button>

    <script>

        // 优化 ： 只能实例化一次 ， 通过反复调用init方法实现自定义弹窗


        const dialog = (function () {
            class Dialog {
                constructor() {
                    this.data = [
                        {
                            name: 'danger',
                            title: '危险',
                            text: '确定要删除我吗？',
                            bgcolor: 'red'
                        },
                        {
                            name: 'success',
                            title: '成功',
                            text: '恭喜你',
                            bgcolor: 'green'
                        },
                        {
                            name: 'info',
                            title: '提示',
                            text: '吃饭了吗',
                            bgcolor: 'skyblue'
                        }
                    ] ;
                    this.createHTML();
                    this.event()
                }

                // 只调用一次
                createHTML() {
                    // 创建 cover
                    this.oCover = document.createElement('div');
                    css(this.oCover, {
                        position: 'fixed',
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        backgroundColor: 'rgba(0,0,0,0.4)',
                    });

                    // 创建 
                    const oDialog = document.createElement('div');
                    css(oDialog, {
                        width: '600px',
                        height: '400px',
                        position: 'fixed',
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        margin: 'auto',
                        border: '1px solid #000',
                        backgroundColor: 'white',
                    })


                    // 创建 标题 
                    this.oTitle = document.createElement('div');
                    this.oTitle.className = 'title'
                    css(this.oTitle, {
                        height: '50px',
                        lineHeight: '50px',
                        borderBottom: '1px solid #000',
                        paddingLeft: '30px',
                    })

                    // 创建 body
                    this.oBody = document.createElement('div');
                    css(this.oBody, {
                        height: '300px',
                        lineHeight: '300px',
                        borderBottom: '1px solid #000',
                        textAlign: 'center'
                    })
                    // 创建 foot
                    this.oFoot = document.createElement('div');
                    css(this.oFoot, {
                        height: '50px',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                    })

                    // 创建按钮
                    this.oBtn = document.createElement('button');
                    this.oBtn.innerHTML = '确定'
                    css(this.oBtn, {
                        padding: '10px'
                    })

                    // 插入节点
                    this.oFoot.appendChild(this.oBtn);
                    oDialog.appendChild(this.oTitle)
                    oDialog.appendChild(this.oBody)
                    oDialog.appendChild(this.oFoot)
                    this.oCover.appendChild(oDialog)
                    document.body.appendChild(this.oCover)
                }

                event() {
                    // 关闭弹窗
                    this.oBtn.onclick = () => {
                        css(this.oCover, {
                            display: 'none'
                        })
                    }
                }


                // 每次都要调用
                init(type, bodyText) {
                    // 第一次使用之后因为有none   下一次使用的时候都需要显示
                    css(this.oCover, {
                        display: 'block'
                    })
                    // type 就是弹窗的类型
                    // 找到对应的数据
                    const res = this.data.filter(item => item.name === type)[0];
                    this.oTitle.innerHTML = res.title;
                    this.oBody.innerHTML = bodyText || res.text;
                    css(this.oTitle, {
                        backgroundColor: res.bgcolor
                    })
                }
            }


            // 实例化的过程

            let d = null;
            return function(...arr) {
                if (!d) {
                    d = new Dialog()
                }
                // 无论是否已经实例化都调用这个方法
                
                d.init(...arr)
            }

        })()





        


        const oDel = document.querySelector('.del') ;

        oDel.onclick = function() {
            dialog('danger' , '饿死了') ;

            const oTitle = document.querySelector('.title');
            oTitle.style.backgroundColor = 'pink' ;

        }

        const oInfo = document.querySelector('.info') ;

        oInfo.onclick = function() {
           dialog('info' , '饿死了') ;
        }


        


        // 设置样式
        function css(ele, options) {
            for (let k in options) {
                ele.style[k] = options[k]
            }
        }

    </script>

</body>

</html>